<template>
  <div class="table">
    <el-table border :data="tableData" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="handleSelectionChange">
      <!-- 多选按钮 -->
      <template v-if="tableConfig.checkout==true">
        <el-table-column type="selection" align="center" :selectable="selectable"></el-table-column>
      </template>
      <template v-for="(item, index) in tableConfig.config">
        <!-- 操作 -->
        <template v-if="item.prop === 'operation'">
          <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
            <template slot-scope="scope">
              <template v-if="scope.$index !==0">
                <el-button v-for="n in item.list" :key="n.id" @click="examine(scope.row, n.id, scope.$index)" type="text" size="small" :class="n.className">{{n.name}}</el-button>
              </template>
              <template v-else>
                <el-button type="primary" round size="mini" @click="examine(scope.row, 'query', scope.$index)">查询</el-button>
                <el-button type="text" @click="examine(scope.row, 'del', scope.$index)">清除</el-button>
              </template>
            </template>
          </el-table-column>
        </template>
        <!-- 状态 -->
        <template v-else-if="item.prop === 'status'">
          <el-table-column :key="item.id" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
            <template slot-scope="scope">
              <div v-if="scope.$index === 0">
                <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                  <el-option v-for="item in item.optionsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
              <template v-else>
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#49abf8" inactive-color="#ec5529" @change="changeSwitch(scope.row)"/>
              </template>
            </template>
          </el-table-column>
        </template>
        <!-- 内容 -->
        <template v-else>
          <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
            <template slot-scope="scope">
              <div v-if="scope.$index === 0">
                <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                  <el-option v-for="item in item.optionsList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>
              </div>
              <div v-else >{{scope.row[item.prop]}}</div>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Talbe',
  props: {
    tableData: {
      type: Array,
      default: () => {}
    },
    tableConfig: {
      type: Object,
      default: () => {}
    },
    optionsList: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      // multipleSelection: []
    }
  },
  created () {
  },
  methods: {
    selectable (row, index) {
      if (index !== 0) {
        return true
      } else {
        return false
      }
    },
    examine (rows, id, index) {
      this.$emit('operation', {id: id, rows: rows, index: index})
    },
    handleSelectionChange (val) {
      this.$emit('deleteSelect', val)
    },
    changeSwitch (row) {
      this.$emit('changeSwitch', row)
    }
  }
}
</script>
<style scoped>
  .table{
    margin: 20px 0;
  }
</style>
